<template>
  <div>
    <div class="mapCenter">
      <div class="opration">
        <div class="anniubtn">
          <el-button size="mini">近一月</el-button>
          <el-button size="mini" @click.native="sevenDay">近一周</el-button>
          <el-button size="mini" @click.native="threeDay">近三天</el-button>
          <!-- <el-button
            size="mini"
            class="el-icon-date btnIcon"
            
            @click="focused = true"
          /> -->
          <!-- <div style="margin-left: 0.185rem;">
            <el-date-picker
              class="el-date-picker"
              v-model="value1"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div> -->
        </div>
        <p class="refrashDate">
          <a>全国</a><a v-if="!firstRender && third == false">-上海市分行</a>
        </p>
      </div>
      <div class="select">
        <el-select
          ref="fieldSelect"
          multiple
          clearable
          v-model="value"
          filterable
          placeholder="请选择"
          @focus="focus"
          @blur="blur"
        >
          <el-option-group
            v-for="group in options"
            :key="group.label"
            :label="group.label"
          >
            <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-option-group>
        </el-select>
      </div>
      <div class="lunbo">
        <el-carousel height="0.25rem" @click.native="handleClick">
          <el-carousel-item
            v-for="(ca, i) in carouselData"
            :key="i + 'ca'"
            :interval="5000"
            arrow="always"
          >
            <p>{{ ca }}</p>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
let  baseUrl
let echarts = require("echarts/lib/echarts");
import $ from "jquery";
import { geoCoordMap, GZData } from "./myMap-BCM";
import { provinces, cityMap, special } from "./common";
require("echarts/lib/chart/map");
require("echarts/map/js/china");
let myChart;
let provincesName = "";
let mapStack = [];
//排序数据
let sortData = [];
let areaList = [];
//排序后的标题
let titledata = [];
let mapName = "中国";
import { baseEnv } from "@/request";
export default {
  name: "mapChart",
  data() {
    return {
      areaList: areaList,
      dt: new Date(),
      focused: false,
      value1: null,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      carouselData: [
        "【静安区档案中心】 温度22℃  湿度52%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.5.00",
        "【闵行区档案中心】 温度18℃  湿度45%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.5.08",
      ],
      second: false,
     
   
      // imgsrc2: require("../assets/.jpg"),

      mapChina: [],
      firstRender: true,
      third: false,
      isShowcity: false,
      curMap: {},
      options: [
        {
          label: "年限",
          options: [
            {
              value: "1",
              label: "2020年",
            },
            {
              value: "2",
              label: "2021年",
            },
          ],
        },
        {
          label: "档案类型",
          options: [
            {
              value: "3",
              label: "会计",
            },
            {
              value: "4",
              label: "信用卡",
            },
            {
              value: "5",
              label: "文书",
            },
            {
              value: "6",
              label: "借贷",
            },
          ],
        },
      ],
      value: "1",
      rawData: [
        ["江苏省", 10, 20, 30],
        ["浙江省", 10, 20, 30],
        ["广州省", 10, 20, 30],
        ["河南省", 10, 20, 30],
        ["陕西省", 10, 20, 30],
        ["四川省", 10, 20, 30],
        ["广西省", 10, 20, 30],
        ["江西省", 10, 20, 30],
        ["辽宁省", 10, 20, 30],
      ],
      geoArr: [
        [119.121894, 33.651473],
        [120.147345, 30.2838430000001],
        [113.271554, 23.140889],
        [113.565911, 34.706511],
        [108.1939, 34.127123],
        [108.488257, 23.929684],
        [108.488257, 23.929684],
        [115.773586, 27.921376],
        [122.249435, 41.140629],
      ],
    };
  },

  mounted() {
    if (baseEnv == "development") {
      baseUrl = "/api";
    } else {
      baseUrl = "http://services.kaiqiaole.com/AIM";
    }
    // 初始化加载
    this.mapChart();
    this.$nextTick(function() {
      this.$refs.fieldSelect.$refs.scrollbar.$el.classList.add(
        "scroll-opacity"
      );
    });
  },
  methods: {
    threeDay() {
      let month = parseInt(this.dt.getMonth() + 1);
      let day1 = this.dt.getFullYear() + "-" + month + "-" + this.dt.getDate();
      let day2 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 1);
      let day3 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 2);
      this.$emit("changeData", [day3, day2, day1]);
    },
    sevenDay() {
      let month = parseInt(this.dt.getMonth() + 1);
      let day1 = this.dt.getFullYear() + "-" + month + "-" + this.dt.getDate();
      let day2 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 1);
      let day3 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 2);
      let day4 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 3);
      let day5 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 4);
      let day6 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 5);
      let day7 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 6);
      this.$emit("changeSevenData", [day7, day6, day5, day4, day3, day2, day1]);
    },
    focus() {},
    blur() {},
    handleClick() {
      // this.randerHtml();
    },
    // 获取横纵坐标
    getMousePos() {
      var e = event || window.event;
      var scrollX =
        document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollY =
        document.documentElement.scrollTop || document.body.scrollTop;
      var x = e.pageX || e.clientX + scrollX;
      var y = e.pageY || e.clientY + scrollY;
      console.log("获取横纵坐标", x, y);
      return {
        x: x,
        y: y,
      };
    },
    // 返回全国视图
    backMap() {
      //获取上一级地图信息
      let map = mapStack.pop();
      if (mapStack.length == 0) {
        this.$emit("changAllData");
        myChart.clear();
        myChart.off("click");
        myChart.off("contextmenu");
        this.firstRender = true;
        this.second = false;
        this.third = false;
        this.isShowcity = false;
        setTimeout(() => {
          this.mapChart();
        }, 0);
        return;
      }
      if (mapStack.length == 1) {
        provincesName = map.provincesName;
        this.isShowcity = false;
      }
      this.$echarts.registerMap(map.mapName, map.mapJson);
      sortData = map.sortData;
      titledata = map.titledata;
      this.initEcharts(map.mapName, map.mapJson, map.sortData, false); //map.mapchin是data数据

      if (!map) {
        console.log("没有入栈数据了");
        return;
      }
    },
    //配置渲染map
    mapChart() {
      myChart = echarts.init(document.getElementById("container"));
      myChart.showLoading();
      document.getElementById("container").oncontextmenu = function() {
        return false;
      };
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // 第一次渲染地图province/zhejiang
      $.getJSON(`/map/china.json`, (data) => {
        console.log(`/map/china.json`);
        this.mapChina = data;
        myChart.hideLoading();
        let mapJsonData = [];
        for (var i = 0; i < data.features.length; i++) {
          mapJsonData.push({
            id: data.features[i].id,
            name: data.features[i].properties.name,
          });
        }
        echarts.registerMap(mapName, data);
        /**获取省份数据*/
        this.renderPrimaryMap(mapJsonData, true);
      });
      // 市
      var that = this;

      // 点击触发
      myChart.on("click", (param) => {
        provincesName = provinces[param.name] || cityMap[param.name];
        if (
          param.componentSubType == "scatter" ||
          (param.componentSubType == "effectScatter" && this.second)
        ) {
          // this.randerHtml();
          let routeData = this.$router.resolve({
            path: "/about",
            query: {
              title: "上海市",
            },
          });
          window.open(routeData.href, "_blank");
        }
        // if(param.componentSubType == "effectScatter" && this.firstRender){}
        this.firstRender = false;
        // if (param.data) {
        //   if (!(param.data.id || param.data.cityid)) {
        //     // 有省id，市id才有下一级
        //     console.error("该地图没有下一级地区了");
        //     return;
        //   }
        // } else {
        //   return;
        // }
        if (param.name in provinces) {
          this.$emit("changeCityData");
          this.second = true;
          if (param.name == "上海") {
            /**
             * 绑定数据入栈事件
             */
            let n = 1;
            if (special.indexOf(param.name) == -1) {
              n = 2; //2层
            }
            // FiXED:  2级下钻会有问题， 函数顶部加入下钻层级判断
            if (mapStack.length < n) {
              //   //将上一级地图信息压入mapStack
              mapStack.push({
                mapName: this.curMap.mapName,
                mapJson: this.curMap.mapJson, // mapJson
                sortData: this.curMap.sortData, // sortData
                titledata: this.curMap.titledata,
                provincesName: this.curMap.provincesName,
              });
            }
            this.firstRender = false;
          }
          // 下钻一层
          //直辖市和特别行政区-只有二级地图，没有三级地图
          if (special.indexOf(param.name) >= 0) {
            showProvince(param);
          } else {
            showProvince(param);
          }
        } else {
          // 显示县级地图
          // this.third = true;
          this.isShowcity = true;
          showCitys(param);
        }
      });
      myChart.on("contextmenu", () => {
        this.backMap();
        return false;
      });
      //异步展示地图
      //展示对应的省
      function showProvince(param) {
        if (param.name == "上海") {
          $.getJSON(
            `/map/province/${provinces[param.name]}.json`,
            (data) => {
              that.mapChina = data;
              that.$echarts.registerMap(param.name, data);
              let mapJsonData = [];
              for (var i = 0; i < data.features.length; i++) {
                // 读取地图的 name 用来组成 echart 需要的形式
                mapJsonData.push({
                  name: data.features[i].properties.name,
                  value: Math.floor(Math.random() * 10000),
                });
              }
              that.initEcharts(param.name, mapJsonData, null, false);
              if (param.data.id !== "undifiend") {
                that.getCityNumber(param.name, param.data.id, that.mapChina);
              }
            }
          );
        } else {
          that.$message("当前城市暂未开拓");
          return;
        }
      }

      //展示对应市
      function showCitys(param) {
        // 显示县级地图
        if (param.name == "杭州市") {
          $.getJSON(
            `/map/city/${cityMap[param.name]}.json`,
            (data) => {
              that.mapChina = data;
              that.$echarts.registerMap(param.name, data);
              let mapJsonData = [];
              that.$echarts.registerMap(param.name, data);
              for (var i = 0; i < data.features.length; i++) {
                // 读取地图的 name 用来组成 echart 需要的形式
                mapJsonData.push({
                  name: data.features[i].properties.name,
                });
              }

              // if (that.second) {
              //   that.initEcharts(param.name, mapJsonData, null, false);
              // } else {
              that.initEcharts(param.name, mapJsonData, null, false);
              // }
              //  if (param.data.cityid) {
              // let postData3 = {
              //   parentid: 'cityid',
              //   value: params.data.cityid,
              // }
              //这里传递的城市名有问题“北京市”，渲染地图的名字是“北京”，所以地图名要用原来的名字渲染
              // that.getAreaNumber(param.name, param.data.cityid, data)
              // }
            }
          );
        } else {
          that.$message("直辖市没有县级地图！");
          return;
        }
      }
    },
    initEcharts(mapTitle, mapJson, customerNum, status = false) {
      var objArr = [];
      let geo = {};
      if (this.firstRender) {
        this.renderScatter("china");
        var color = ["#f0814dea"];
        [["石家庄", GZData]].forEach(function(item, i) {
          objArr.push(
            // 涟漪散点图
            {
              name: item[0],
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                brushType: "stroke",
              },
              label: {
                normal: {
                  show: true,
                  position: "right",
                  formatter: "{b}",
                },
              },
              symbolSize: function(val) {
                return val[2] / 8;
              },
              itemStyle: {
                normal: {
                  color: color[i],
                },
              },
              data: item[1].map(function(dataItem) {
                return {
                  name: dataItem[1].name,
                  value: geoCoordMap[dataItem[1].name].concat([
                    dataItem[1].value,
                  ]),
                };
              }),
            }
          );
        });
      }
      if (this.second && !this.firstRender) {
        this.renderCityScatter();
        if (!this.third) {
          // 第二层
          this.renderCityScatter();
          var chinaGeoCoordMap = {
            // 经纬度
            浦东新区: [121.542056, 31.231483],
            嘉定区: [121.283344, 31.384512],
            闵行区: [121.392578, 31.122729],
            奉贤区: [121.483953, 30.930659],
          };
          var chinaDatas = [
            //航线条数
            [
              {
                name: "嘉定区",
                value: 0,
              },
            ],
            [
              {
                name: "闵行区",
                value: 0,
              },
            ],
            [
              {
                name: "奉贤区",
                value: 0,
              },
            ],
          ];
          var convertDataPro = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
              var dataItem = data[i];
              var fromCoord = chinaGeoCoordMap[dataItem[0].name];
              var toCoord = [121.542056, 31.231483]; //目的地
              if (fromCoord && toCoord) {
                res.push([
                  {
                    coord: fromCoord,
                    value: dataItem[0].value,
                  },
                  {
                    coord: toCoord,
                  },
                ]);
              }
            }
            return res;
          };
          objArr = [];
          geo = {
            geo: {
              show: true,
              map: provincesName,
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: "#ddd",
                  },
                },
                emphasis: {
                  textStyle: {
                    color: "#000",
                  },
                },
              },
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                  borderColor: "#EBEBE4", //#EBEBE4灰色
                  borderWidth: 0.5,
                },
                emphasis: {
                  areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
                },
              },
            },
          };
          var symbolImg2 = "image://" + require("@/assets/logo.png");
          var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
          var symbolImg = "image://" + require("@/assets/jiaotongyinhang.png");
          [["浦东新区", chinaDatas]].forEach(function(item) {
            objArr.push(
              {
                type: "lines",
                zlevel: 2,
                effect: {
                  show: true,
                  period: 4, //箭头指向速度，值越小速度越快
                  trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: symbolImgPlane, //箭头图标
                  // symbol: "arrow", //箭头图标
                  symbolSize: 20, //图标大小
                },
                lineStyle: {
                  normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: 0.3, //尾迹线条曲直度
                    color: "#f0814dea",
                  },
                },
                data: convertDataPro(item[1]),
              },
              {
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                  //涟漪特效
                  period: 20, //动画时间，值越小速度越快
                  brushType: "stroke", //波纹绘制方式 stroke, fill
                  scale: 0, //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                  normal: {
                    show: true,
                    position: "right", //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function(params) {
                      //圆环显示文字
                      return params.data.name;
                    },
                    fontSize: 13,
                  },
                  emphasis: {
                    show: true,
                  },
                },
                symbol: symbolImg,
                symbolSize: 20,
                itemStyle: {
                  normal: {
                    show: false,
                    color: "#f00",
                  },
                },
                data: item[1].map(function(dataItem) {
                  return {
                    name: dataItem[0].name,
                    value: chinaGeoCoordMap[dataItem[0].name].concat([
                      dataItem[0].value,
                    ]),
                  };
                }),
              },
              //被攻击点
              {
                type: "scatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                  period: 4,
                  brushType: "stroke",
                  scale: 4,
                },
                label: {
                  normal: {
                    show: true,
                    position: "right",
                    //offset:[5, 0],
                    color: "#0f0",
                    formatter: "{b}",
                    textStyle: {
                      color: "#0f0",
                    },
                  },
                  emphasis: {
                    show: true,
                    color: "#f60",
                  },
                },
                symbol: symbolImg2,
                symbolSize: 30,
                data: [
                  {
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                  },
                ],
              }
            );
          });
        }
      }
      let series = [];
      series = [
        ...objArr,
        {
          name: mapTitle, //上面的下钻用到seriesName绑定下一级，换name绑定
          type: "map",
          geoIndex: 0,
          map: mapTitle,
          // roam: false,
          height: "100%",
          zoom: 1,
          itemStyle: {
            normal: {
              areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
              borderColor: "#EBEBE4", //#EBEBE4灰色
            },
            emphasis: {
              areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
            },
          },
          data: customerNum,
        },
      ];
      let option = {
        ...geo,
        series: series,
        // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
        animationDuration: 1000,
        animationEasing: "cubicOut",
        // 数据更新动画的时长。
        animationDurationUpdate: 1000,
      };
      if (status) {
        myChart.setOption(option);
        // myChart.setOption(
        //   option,
        //   {
        //     replaceMerge: ["geo"],
        //   },
        //  false
        // );
      } else {
        myChart.setOption(option);
      }
      this.curMap = {};
      this.curMap = {
        mapName: mapTitle, //地图名称
        mapJson: mapJson, // 地图的json数据
        mapChina: this.mapChina,
        sortData: sortData, // 排序后的json数据
        titledata: titledata, // 地图名称下对应的地理名数组
        provincesName: provincesName,
      };
    },
    // 渲染二级地图，城市
    renderPrimaryMap(result, flag) {
      let tmp = [];
      if (flag) {
        result.forEach((item) => {
          tmp.push({
            id: item.id,
            name: item.name,
            value: Math.floor(Math.random() * 100 + parseInt(item.id)),
          });
        });
      }
      //获取最大值，并排序
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      //绘制地图，拿到数据后再渲染一次
      this.initEcharts(mapName, this.mapChina, tmp, false);
    },
    setAreaList(data) {
      this.areaList = data; // vue是这样写的，内部有代理
    },
    getMaxDataAndSort(originData) {
      if (originData == "undefined") {
        return;
      }
      titledata = [];
      sortData = [];
      sortData = originData.sort(this.numDescSort);
      let maxData = sortData.slice(-1)[0]["value"];
      let maxDataId = sortData.slice(-1)[0]["id"];
      if (!maxDataId) {
        maxDataId = sortData.slice(-1)[0]["cityid"]
          ? sortData.slice(-1)[0]["cityid"]
          : sortData.slice(-1)[0]["areaid"];
      }
      for (let i = 0; i < sortData.length; i++) {
        titledata.push(sortData[i].name);
      }
      areaList = [...sortData].reverse();
      this.setAreaList(areaList);
      return {
        maxDataId,
        maxData,
      };
    },
    numDescSort(a, b) {
      return a["value"] - b["value"];
    },
    stringToJson(data) {
      let result = Object.create(null);
      if (Object.prototype.toString.call(data) !== "[object Object]") {
        try {
          result = JSON.parse(data);
        } catch {
          throw TypeError("数据转换成JSON出错");
        }
      }
      return result;
    },
    getCityNumber(name, id, data) {
      if (!id) {
        return;
      }
      // let postData2 = {
      //   parentid: 'provinceid',
      //   value: id,
      // }
      this.renderSecondMap(name, data, true);
    },
    renderSecondMap(eName, resp, flag = false) {
      let tmp = [];
      if (flag) {
        resp.features.forEach((item) => {
          tmp.push({
            //需要加上cityid传递渲染，下一级地图渲染需要用到，点击的时候有判断，没有下级id直接return
            cityid: item.id,
            name: item.properties.name,
            value: item.properties.childNum,
          });
        });
      }
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      this.initEcharts(eName, this.mapChina, tmp, false);
    },
    getAreaNumber(cityName, cityId, data) {
      //   let postData3 = {
      //   parentid: 'cityid',
      //   value: cityId,
      // }
      this.renderThirdMap(cityName, data, true);
    },
    renderThirdMap(cityName, resp, flag = false) {
      let tmp = [];
      if (flag) {
        resp.features.forEach((item) => {
          tmp.push({
            areaid: item.id,
            name: item.properties.name,
            value: Math.floor(Math.random() * 10 + 1),
          });
        });
      }
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      this.initEcharts(cityName, this.mapChina, tmp, false);
    },
    // 航线图表
    renderScatter(map) {
      if (this.firstRender) {
        var color = ["#f0814dea"];
        var series = [];
        [["石家庄", GZData]].forEach(function(item, i) {
          series.push(
            // 涟漪散点图
            {
              name: item[0],
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                brushType: "stroke",
              },
              label: {
                normal: {
                  show: true,
                  position: "right",
                  formatter: "{b}",
                },
              },
              symbolSize: function(val) {
                return val[2] / 8;
              },
              itemStyle: {
                normal: {
                  color: color[i],
                },
              },
              data: item[1].map(function(dataItem) {
                return {
                  name: dataItem[1].name,
                  value: geoCoordMap[dataItem[1].name].concat([
                    dataItem[1].value,
                  ]),
                };
              }),
            }
          );
        });
        let option = {
          // tooltip: {
          //   trigger: "item",
          // },
          geo: {
            map: map,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#ddd",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#000",
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                borderColor: "#EBEBE4", //#EBEBE4灰色
                borderWidth: 0.5,
              },
              emphasis: {
                areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
              },
            },
          },
          series: series,
        };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
    },
    // 制作散点图
    renderCityScatter() {
      if (this.second) {
        if (isNaN(parseInt(provincesName))) {
          var chinaGeoCoordMap = {};
          var chinaDatas = [];
          if (provincesName == "shanghai") {
            chinaGeoCoordMap = {
              // 经纬度
              浦东新区: [121.542056, 31.231483],
              嘉定区: [121.283344, 31.384512],
              闵行区: [121.392578, 31.122729],
              奉贤区: [121.483953, 30.930659],
            };
            chinaDatas = [
              //航线条数
              [
                {
                  name: "嘉定区",
                  value: 0,
                },
              ],
              [
                {
                  name: "闵行区",
                  value: 0,
                },
              ],
              [
                {
                  name: "奉贤区",
                  value: 0,
                },
              ],
            ];
          } else {
            chinaGeoCoordMap = {};
            chinaDatas = [];
          }
          var convertDataPro = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
              var dataItem = data[i];
              var fromCoord = chinaGeoCoordMap[dataItem[0].name];
              var toCoord = [121.542056, 31.231483]; //目的地
              if (fromCoord && toCoord) {
                res.push([
                  {
                    coord: fromCoord,
                    value: dataItem[0].value,
                  },
                  {
                    coord: toCoord,
                  },
                ]);
              }
            }
            return res;
          };
          var series = [];
          $.getJSON(`/map/province/${provincesName}.json`, (json) => {
            echarts.registerMap(`${provincesName}`, json);
            var symbolImg2 = "image://" + require("@/assets/logo.png"); // 中心点的图标
            var symbolImg =
              "image://" + require("@/assets/jiaotongyinhang.png");
            var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
            [["浦东新区", chinaDatas]].forEach(function(item) {
              series.push(
                {
                  type: "lines",
                  zlevel: 2,
                  effect: {
                    show: true,
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: symbolImgPlane, //箭头图标
                    symbolSize: 20, //图标大小
                  },
                  lineStyle: {
                    normal: {
                      width: 1, //尾迹线条宽度
                      opacity: 1, //尾迹线条透明度
                      curveness: 0.3, //尾迹线条曲直度
                      color: "#f0814dea",
                    },
                  },
                  data: convertDataPro(item[1]),
                },
                {
                  type: "effectScatter", //effectScatter
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    //涟漪特效
                    period: 20, //动画时间，值越小速度越快
                    brushType: "stroke", //波纹绘制方式 stroke, fill
                    scale: 0, //波纹圆环最大限制，值越大波纹越大
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right", //显示位置
                      offset: [5, 0], //偏移设置
                      formatter: function(params) {
                        //圆环显示文字
                        return params.data.name;
                      },
                      fontSize: 13,
                    },
                    emphasis: {
                      show: true,
                    },
                  },
                  // symbol: "circle",
                  symbol: symbolImg,
                  symbolSize: 20,
                  itemStyle: {
                    normal: {
                      show: false,
                      color: "#f00",
                    },
                  },
                  data: item[1].map(function(dataItem) {
                    return {
                      name: dataItem[0].name,
                      value: chinaGeoCoordMap[dataItem[0].name].concat([
                        dataItem[0].value,
                      ]),
                    };
                  }),
                },
                //被攻击点
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    period: 4,
                    brushType: "stroke",
                    scale: 4,
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right",
                      //offset:[5, 0],
                      color: "#f60",
                      formatter: "{b}",
                      textStyle: {
                        color: "#f60",
                      },
                    },
                    emphasis: {
                      show: true,
                      color: "#f60",
                    },
                  },
                  symbol: symbolImg2,
                  symbolSize: 30,
                  data: [
                    {
                      name: item[0],
                      value: chinaGeoCoordMap[item[0]].concat([10]),
                    },
                  ],
                }
              );
            });
            let option = {
              geo: {
                show: true,
                map: provincesName,
                label: {
                  normal: {
                    show: false,
                    textStyle: {
                      color: "#ddd",
                    },
                  },
                  emphasis: {
                    textStyle: {
                      color: "#000",
                    },
                  },
                },
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                    borderColor: "#EBEBE4", //#EBEBE4灰色
                    borderWidth: 0.5,
                  },
                  emphasis: {
                    areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
                  },
                },
                // itemStyle: {
                //   normal: {
                //     areaColor: "transparent",
                //     borderColor: "#3fdaff",
                //     borderWidth: 2,
                //     shadowColor: "rgba(63, 218, 255, 0.5)",
                //     shadowBlur: 30,
                //   },
                //   emphasis: {
                //     areaColor: "#2B91B7",
                //   },
                // },
              },
              series: series,
              // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
              animationDuration: 1000,
              animationEasing: "cubicOut",
              // 数据更新动画的时长。
              animationDurationUpdate: 1000,
            };
            myChart.setOption(option);
          });
        }
      }
    },
  },
};
</script>

<style scoped>
.opration {
  color: #fff;
  display: flex;
}

.mapCenter {
  position: relative;
}

.anniubtn {
  width: 50%;
  display: flex;
}

.refrashDate {
  color: #fff;
  width: 50%;
  cursor: pointer;
  font-size: 0.25rem;
}

.refrashDate a:hover {
  color: rgb(49, 153, 214);
}

#container {
  width: 100%;
  height: 6rem;
  margin: 0px auto 0;
}

.opration .anniubtn button:nth-child(1) {
  margin-left: 0.185rem;
}

.opration .anniubtn button {
  color: #c6cde9;
  background-color: rgba(172, 178, 238, 0.1);
  border-color: #46528c;
}

.opration .anniubtn button:hover {
  background-color: rgb(198, 205, 233);
  color: rgb(3, 12, 59);
}

.opration .anniubtn button:focus {
  background-color: rgb(198, 205, 233);
  color: rgb(3, 12, 59);
}

.opration .anniubtn .el-date-picker {
  color: #c6cde9;
  background-color: rgba(172, 178, 238, 0.1);
  border-color: #46528c;
}

/* .opration .anniubtn .el-date-picker:hover {
  background-color: rgb(198, 205, 233);
  color: rgb(3, 12, 59);
} */
.select {
  margin-left: 0.185rem;
  margin-top: 0.185rem;
}

.lunbo {
  position: absolute;
  bottom: 0.185rem;
  width: 100%;
  height: 0.25rem;
  font-size: 0.185rem;
  line-height: 0.25rem;
  background: turquoise;
  opacity: 0.4;
  z-index: 10;
  overflow: hidden;
}
</style>
<style>
.el-range-editor .el-range-input {
  color: #c6cde9 !important;
  background-color: rgba(172, 178, 238, 0.1) !important;
  border-color: #46528c !important;
}

.el-date-editor .el-range-separator {
  width: 10% !important;
  color: #c6cde9;
}

.el-select-dropdown__wrap {
  max-height: 150px !important;
}

.el-select-dropdown__item.selected {
  color: #c6cde9;
  background-color: rgba(172, 178, 238, 0.1);
  border-color: #46528c;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: transparent;
  /* color: rgb(11, 39, 179); */
  color: #fff;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: transparent;
  /* color: rgb(11, 39, 179); */
  color: #fff;
}

.el-scrollbar {
  overflow: hidden;
  position: relative;
  background: rgb(3, 12, 59);
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
  background-color: transparent;
  /* color: rgb(11, 39, 179); */
  color: #fff;
}

/* .el-input {
  width: 1.5rem;
  height: 0.12rem;
} */
.el-input--suffix .el-input__inner {
  background: rgb(3, 12, 59);
}

.el-select-dropdown {
  border: 1px solid rgb(3, 12, 59) !important;
}

.el-popper .popper__arrow {
  display: none;
}

.el-select-dropdown__item {
  height: 28px;
  line-height: 28px;
}

/* .el-popper[x-placement^="bottom"] {
  margin-top: 22px;
} */
/* .el-input--mini .el-input__icon {
  line-height: 0px;
  margin-top: 3px;
} */
.el-select-dropdown__list {
  display: flex;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  position: absolute;
  right: 20px;
  font-family: element-icons;
  content: "\e6da";
  font-size: 12px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  right: 0px;
}

.el-select-group__title:not(:first-of-type)::after {
  content: "";
  position: absolute;
  display: block;
  left: 77px;
  right: 0;
  bottom: 12px;
  height: 12px;
  background: #e4e7ed;
  width: 2px;
  top: 8px;
}

.el-input--suffix .el-input__inner {
  border-color: #38388a;
}

/* .el-select .el-input.is-focus .el-input__inner {
  border-color: #141458;
} */
.el-select-group__wrap:not(:last-of-type)::after {
  display: none;
}

.el-tag.el-tag--info {
  background-color: #141458;
  border-color: #3c3cc3;
  color: #909399;
}

.el-input--mini {
  font-size: 16px;
}

.text {
  color: #fff;
}

.textH {
  color: #fff;
  text-align: center;
  white-space: nowrap;
  padding-bottom: 0.185rem;
}

#zhuzhuang {
  background: rgb(178, 138, 8);
}

.divBox {
  display: flex;
}

.leftBox {
  width: 30%;
  position: relative;
}

.rightBox {
  flex: 1;
}

.icon,
.ptext {
  vertical-align: middle;
}

.iconBox {
  position: absolute;
  left: 0.185rem;
  top: 0.185rem;
  background-color: #fff;
  z-index: 99;
}

ul > li {
  list-style: none;
}

.lilist {
  cursor: pointer;
}

.lilist.notclick {
  cursor: not-allowed;
}

.el-select-dropdown
  .scroll-opacity.el-scrollbar
  .el-scrollbar__bar.is-vertical {
  opacity: 1;
}

.pdesc {
  color: #fff;
}

.pdesc > p {
  text-decoration: underline;
  font-size: 0.2rem;
  letter-spacing: 0.01rem;
  margin-bottom: 0.125rem;
  margin-left: 0.125rem;
}

.el-carousel__indicator--horizontal {
  display: none;
}
</style>
